<template>
    <div>
        <div class="header" @click="this.$router.push({ path: '/task02' })">返回</div>
        <el-card class="detail">
            <div>{{ news.title }}</div>
            <div class="content">{{ news.content }}</div>
            <div class="action">
                <el-icon :color="color" size="24px" style="cursor: pointer;" @click="like()">
                    <StarFilled />
                </el-icon>
            </div>
        </el-card>
    </div>
</template>
<script>
import { markRaw } from "vue";
export default {
    data() {
        return {
            id: null,
            news: {},
            color: '',
            isLike: 0
        }
    },
    created() {
        this.id = this.$route.query.id
        markRaw(this.news)
        this.fetchData()
        if (Reflect.get(this.news, "isLike") == 0) {
            this.color = "#000"
        } else {
            this.color = "#5468ff"
        }
    },
    methods: {
        fetchData() {
            const list = JSON.parse(localStorage.getItem("news"))
            console.log(list);
            for (let index = 0; index < list.length; index++) {
                if (this.id == list[index].id) {
                    this.news = list[index]
                }
            }
        },
        like() {
            this.isLike = Reflect.get(this.news, "isLike")
            if (this.isLike == 0) {
                this.color = "#5468ff"
                Reflect.set(this.news, "isLike", 1)
            } else if (this.isLike == 1) {
                this.color = "#000"
                Reflect.set(this.news, "isLike", 0)
            }
            let list = JSON.parse(localStorage.getItem("news"))
            for (let index = 0; index < list.length; index++) {
                if (list[index].id == Reflect.get(this.news, "id")) {
                    list[index].isLike = Reflect.get(this.news, "isLike")
                }
            }
            localStorage.setItem("news", JSON.stringify(list))
        }
    }
}
</script>
<style scoped>
.header {
    margin-bottom: 10px;
}

.content {
    margin-top: 50px;
}

.detail {
    position: relative;
}

.action {
    bottom: 0px;
    text-align: right;
}
</style>